<template>
  <div class="mainDiv">
    <el-row class="topRow">
      <el-col :span="2">
        <span>车辆数量：{{mCarAndDriverNumberStatus.carAll}}</span>
      </el-col>
      <el-col :span="2">
        <span>在库车辆：{{mCarAndDriverNumberStatus.carIn}}</span>
      </el-col>
      <el-col :span="2">
        <span>出库车辆：{{mCarAndDriverNumberStatus.carOut}}</span>
      </el-col>
      <el-col :span="2">
        <span>司机数量：{{mCarAndDriverNumberStatus.driverAll}}</span>
      </el-col>
      <el-col :span="2">
        <span>可派司机：{{mCarAndDriverNumberStatus.driverIn}}</span>
      </el-col>
      <el-col :span="2">
        <span>出车司机：{{mCarAndDriverNumberStatus.driverOut}}</span>
      </el-col>
      <el-col :span="2">
        <span>请假司机：{{mCarAndDriverNumberStatus.driverRest}}</span>
      </el-col>
    </el-row>

    <el-row style="margin-top:10px">
      <v-OrderListView ref="refOrderListView" @refreshOrderNumberEvent2="tEvent"></v-OrderListView>
    </el-row>

    <el-row style="margin-top:10px;max-width:100%">
      <el-col :span="16">
        <v-CarStatusTable></v-CarStatusTable>
        <v-DriverStatusTable></v-DriverStatusTable>
      </el-col>
      <el-col :span="8" style="padding-top:10px;padding-left:10px">
        <v-NoticePage></v-NoticePage>
      </el-col>
    </el-row>
  </div>
</template>


<style >
.mainDiv {
  /* max-width: 100%; */
  min-width: 100%;
  /* padding: 8px; */
  /* overflow-y:scroll;  */
}
.topRow {
  min-width: 100%;
  background: white;
  padding: 10px;
  border-radius: 2px;
  color: #606266;
  font-size: 16px;
}
</style>



<script>
import { getRequestHeader, loginApi, getThirdCompanyApi } from "../api/user.js";
import { getNowFormatDate, getWeekToday } from "../api/util.js";
import {
  queryControllerOrdersApi,
  getDriversApi,
  getCarsApi,
  dispatchOrderApi,
  dispatchThirdCompanyApi,
  closeOrderApi,
  getCarAndDriverNumberStatusApi
} from "../api/order.js";
import { Loading } from "element-ui";
import OrderListView from "./widget/OrderListView.vue";
import CarStatusTable from "./widget/CarStatusTable.vue";
import DriverStatusTable from "./widget/DriverStatusTable.vue";
import NoticePage from "./NoticePage.vue";
export default {
  data() {
    return {
      mCarAndDriverNumberStatus: {}
    };
  },
  components: {
    "v-OrderListView": OrderListView,
    "v-DriverStatusTable": DriverStatusTable,
    "v-NoticePage": NoticePage,
    "v-CarStatusTable": CarStatusTable
  },
  created() {
    this.getCarAndDriverNumberStatus();
  },
  mounted() {
    this.$refs.refOrderListView.setPagesize(2);
  },
  methods: {
    showFullLoading() {
      this.mFullLoading = Loading.service({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    clsoeFullLoading() {
      if (this.mFullLoading) {
        this.mFullLoading.close();
      }
    },
    getCarAndDriverNumberStatus() {
      var that = this;
      getCarAndDriverNumberStatusApi(
        getRequestHeader(),
        new (function() {
          this.success = function(data) {
            that.mCarAndDriverNumberStatus = data;
          };
          this.fail = function(msg) {};
        })()
      );
    },
    tEvent(args) {
      this.$emit("refreshOrderNumberEvent1", "1");
    }

    //----------over methods------
  }
};
</script>